/**
 * 绘制路径
 * @param context canvas context
 * @param beginPosition 开始位置  {x:1 ,y:1}
 * @param positions 途径位置 [{2,2},{3,3}]
 * @param lineColor 线条颜色
 * @param lineWidth 线条宽带
 */
export const drownRoute = (context, beginPosition, positions, lineColor, lineWidth) => {
  context.beginPath();
  context.strokeStyle = lineColor
  context.lineWidth = lineWidth;
  context.moveTo(beginPosition.x, beginPosition.y)
  for (let i = 0; i < positions.length; i++) {
    context.lineTo(positions[i].x, positions[i].y);
  }
  context.closePath();
  context.stroke()


}

/**
 * 绘制直线
 * @param context canvas context
 * @param beginPosition 开始位置  {x:1 ,y:1}
 * @param endPosition 结束位置 {x:2,y:2}
 * @param lineColor 线条颜色
 * @param lineWidth 线条宽带
 */
export const drownLine = (context, beginPosition, endPosition, lineColor, lineWidth) => {
  drownRoute(context, beginPosition, [endPosition], lineColor, lineWidth)
}

/**
 *
 * @param context
 * @param beginPosition 开始位置 {x:1,y:1}
 * @param endPosition 结束位置 {x:100,y:100}
 * @param  lineWidth 边框宽度 1
 * @param color 颜色
 * @param isFill 是否填充 true / false
 */
export const drownRect = (context, beginPosition, endPosition, lineWidth, color, isFill) => {
  context.beginPath();
  context.strokeStyle = color;
  context.lineWidth = lineWidth;
  context.fillStyle = color;
  if (isFill) {
    context.fillRect(beginPosition.x, beginPosition.y, endPosition.x - beginPosition.x, endPosition.y - beginPosition.y);

  } else {
    context.strokeRect(beginPosition.x, beginPosition.y, endPosition.x - beginPosition.x, endPosition.y - beginPosition.y);
  }
  context.closePath();
}

/**
 *
 * @param context
 * @param src
 * @param x
 * @param y
 */
export const drownImage = (context, src, x, y) => {
  context.beginPath();
  let image = new Image();
  image.src = src;
  image.onload = () => {
    context.drawImage(image, x, y);
  }
  context.closePath();
}

export const drownImage2 = (context, src, x, y, w, h) => {
  context.beginPath();
  let image = new Image();
  image.src = src;
  image.onload = () => {
    context.drawImage(image, x, y, w, h);
  }
  context.closePath();
}
/**
 *
 * @param x 圆心 x
 * @param y 圆心 y
 * @param radius 半径
 */
export const drownCircular = (context, x, y, radius, isFill, color, lineWidth) => {
  context.beginPath();
  context.fillStyle = color;
  context.lineWidth = lineWidth;
  context.arc(x, y, radius, 0, 2 * Math.PI);
  if (isFill) {
    context.fill();
  }
  context.closePath();
  context.save()

}
